{extend name="common/common" /}

{block name="content"}
<el-row>
	<el-col :md="18">
		<div class="ibox-title">
		    <h5>个人信息</h5>
		</div>
		<div class="ibox-content">
			<el-tabs tab-position="left" @tab-click='switchTab'>
				<el-tab-pane label="修改信息">
					<el-form
						label-width="100px" inline="true" class="infoForm"
						:model="info_form" ref="info_form" :rules="infoRules">
						<el-form-item label="登陆账号" prop="user_name">
							<el-input v-model="info_form.user_name" disabled></el-input>
						</el-form-item><br>
						<el-form-item label="真实姓名" prop="real_name">
							<el-input v-model="info_form.real_name" placeholder="请输入真实姓名"></el-input>
						</el-form-item><br>
						<el-form-item label=" ">
							<el-button type="primary" plain @click="subInfoForm()">提交</el-button>
						</el-form-item><br>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="修改密码">
					<el-form
						label-width="100px" inline="true" class="pwdForm"
						:model="pwd_form" ref="pwd_form" :rules="pwdRules">
						<el-form-item label="原始密码" prop="old_password">
							<el-input type="password" v-model="pwd_form.old_password" placeholder="请输入原始密码"></el-input>
						</el-form-item><br>
						<el-form-item label="新设密码" prop="new_password">
							<el-input type="password" v-model="pwd_form.new_password" placeholder="请输入新设密码"></el-input>
						</el-form-item><br>
						<el-form-item label="重复密码" prop="renew_password">
							<el-input type="password" v-model="pwd_form.renew_password" placeholder="请输入重复密码"></el-input>
						</el-form-item><br>
						<el-form-item label=" ">
							<el-button type="success" plain @click="subPwdForm()">提交</el-button>
						</el-form-item><br>
					</el-form>
				</el-tab-pane>
			</el-tabs>

		</div>
	</el-col>
</el-row>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		var validateRePwd = (rule, value, callback) => {
			if (value !== this.pwd_form.new_password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			loading:false,
			info_form:{
				user_name:"{$user_data.user_name}",
				real_name:"{$user_data.real_name}",
			},
			pwd_form:{
				old_password:"",
				new_password:"",
				renew_password:""
			},
			infoRules:{
				real_name:[
					{required:true,message:'请输入真实姓名',trigger:['blur','change']},
					{min:2,max:8, message:'长度在 2 到 8 个字符',trigger:['blur','change']}
				],
			},
			pwdRules:{
				old_password:[{required:true,message:'请输入原始密码',trigger:['blur','change']}],
				new_password:[
					{required:true,message:'请输入新密码',trigger:['blur','change']},
					{min:6,max:18, message:'长度在 6 到 18 个字符',trigger:['blur','change']}
				],
				renew_password:[
					{required:true,message:'请重复新密码',trigger:['blur','change']},
					{ validator: validateRePwd,trigger:['blur','change']}
				],
			}
		}
	},
	methods:{
		switchTab() {
			this.$refs['info_form'].clearValidate();
			this.$refs['pwd_form'].clearValidate();
		},
		subInfoForm(){
			this.$refs['info_form'].validate((valid) => {
				if(valid){
					this.doSubForm('info');
				}
			});
		},
		subPwdForm(){
			this.$refs['pwd_form'].validate((valid) => {
				if(valid){
					this.doSubForm('pwd');
				}
			});
		},
		doSubForm(type){
			this.loading = true;
			if(type == "info"){
				var param = this.info_form;
				param.sub_type = "info";
			}else{
				var param = this.pwd_form;
				param.sub_type = "pwd";
			}
			$.post('{:url("profile/index")}',param,function(res){
				main.loading = false;
				if(res.code == 1){
					main.$confirm(res.msg, '成功', {
						confirmButtonText: '确定',
						showClose:false,
						type: 'success',
						showCancelButton:false
					}).then(() => {
						window.location.reload();
					});
				}else{
					main.$notify.error({
						title:"错误",
						message:res.msg
					});
				}
			});
		}
	}
})
</script>
{/block}
